<template>
    <div id="index">
        <v-add></v-add>
        <div class="data">
            <div class="list" v-for="(list,index) in home" v-bind:key="index" :id="list.id">
                <span class="time">{{list.currentdate}}</span>
                <span class="fx">{{list.text}}</span>
                <van-icon name="underway-o" @click="del(list,index)"/>
            </div>
            <div v-if="!home.length" class="length">
                <van-icon name="records" />
                <span>每天记录一点点～～</span>
            </div>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import add from '../components/add'
import footer from '../components/footer'

export default {
    name:'index',
    data(){
        return{
            day:"",
            month:"",
            year:""
        }
    },
    components:{
        'v-add':add,
        'v-footer':footer
    },
    computed:{
        home(){
            return this.$store.state.home;
        },
        ...mapGetters(["this.$store.state.home"])
    },
    methods: {
        del(list,index){
            this.$notify({
                message: '你完成了一件任务！',
                duration: 1000,
                background: '#1989fa'
            });
            var data={
                name:list.text
            }
            this.$store.state.home.splice(index,1)
            this.$store.dispatch('setYes',data)
        }
    },
}
</script>

<style lang="sass" scoped>
@import '../assets/style/common.scss'
    
.data
    margin-bottom: px2rem(96px)
    padding-top: px2rem(96px)

    .length
        display: flex
        justify-content: center
        flex-direction: column
        align-items: center
        margin-top: 50%
        transform: translateY(-50%)
        color: #ccc

        i
            font-size: px2rem(128px)
            
        span
            font-size: px2rem(32px)
            padding-top: px2rem(32px)
    
    .list
        width: 95%
        height: px2rem(96px)
        margin: px2rem(20px) auto
        background: #fff
        border-radius: px2rem(5px)
        display: flex
        align-items: center

        .time
            font-size: px2rem(28px)
            color: #32c9ff
            padding-left: px2rem(32px)
        
        .fx
            font-size: px2rem(28px)
            color: #ccc
            overflow: hidden
            padding-left: px2rem(32px)
            width: px2rem(320px)
            text-overflow: ellipsis
            white-space: nowrap
            display: block

        i
            font-size: px2rem(32px)
            color: #32c9ff
            padding: 0 px2rem(32px)
            cursor: pointer
            
</style>
